<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="../../js/vue.min.js"></script>
	</head>
	<!--
v-model上面有介绍它的双向绑定功能，对于v-model指令，vue限定只能对表单控件进行绑定，常见的有<input>、<select>、<textarea>等。。-->
	

	  <body>
	      <div id="app">
	          <h2>编辑姓名：<input type="text" v-model="Name"/></h2>
	          <h2>姓名：{{Name}}</h2>
	          <hr />
	          <h2>编辑备注：<textarea v-model="Remark"></textarea></h2>
	          <h2>备注：{{Remark}}</h2>
	          <hr />
	  
	  
	           
	          <input type="checkbox" id="basketball" value="篮球" v-model="Hobby">
	          <!--for="basketball 意思点击标签页可以选中，相当于点击了checkbox-->
			  <label for="basketball">篮球</label>
	          <input type="checkbox" id="football"   value="足球" v-model="Hobby">
	          <label for="football">足球</label>
	          <input type="checkbox" id="running"    value="跑步" v-model="Hobby">
	          <label for="running">跑步</label>
	          <br>
	          <h2>学生爱好： {{Hobby}}</h2>
	  
	          <hr />
	          <h2>户籍：{{Huji}}</h2>
	          <select style="width:100px;"  v-model="Huji">
	              <option>湖南</option>
	              <option>广东</option>
	              <option>北京</option>
	          </select>
	          
			  <h2>性别:{{sex}}</h2>
			  <input type=radio value="男" v-model="sex">男
			  <input type=radio value="女" v-model="sex">女
	  </div>
	  

	      <script type="text/javascript">
	      //Model:所有的控件操作的值，全部在变量里面保存
	      var data = {
	          Name: '小明',
	          Age: 18,
	          School: '光明小学',
	          Hobby: [], <!-- checkbox的值必须为数组 -->
	          Remark: '三好学生',
	          Huji: "",
			  sex:"",
	      }

	      //ViewModel
	      var vue = new Vue({
	          el: '#app',
	          data: data,
	      });
	      </script>
	  </body>